<template>
    <div class="commentDetail">
        <div class="comment_item" v-for="(item,index) in comments"
        :key="index" >
            <div class="left">
                <img :src="item.user.avatarUrl" alt="">
                <div class="con_time">
                    <div class="name">{{item.user.nickname}}：{{item.content}}</div>
                    <div class="time">{{item.time | dateFomat}}</div>
                </div>
            </div>
            <div class="right">
                <div class="likedCount iconfont icondianzan1">({{item.likedCount}})</div>
                <div>分享</div>
                <div>回复</div>
            </div>
        </div>
    </div>
</template>

<script>
import {dateFomat} from '../../../util/tool'
export default {
    name: 'commentDetail',
    props: [
        'comments'
    ],
    data() {
        return {

        };
    },
    computed: {

    },
    created() {

    },
    mounted() {

    },
    watch: {

    },
    methods: {

    },
    filters:{
        dateFomat(el){
            return dateFomat(el)
        }
    },
    components: {

    },
};
</script>

<style scoped lang="less">
.position_flex(@jc:space-between,@ai:center){
  display: flex;
  align-items: @ai;
  justify-content: @jc;
}   
.comment_item{
    .position_flex(space-between,flex-end);
    border-bottom: 1px solid #ccc;
    padding: 20px 0;
    .left{
        .position_flex(flex-start);
        width: 85%;
        img{
            width: 50px;
            height: 50px;
            border-radius: 50%;
        }
        .con_time{
            margin-left: 1rem;
            div{
                padding: 5px 0;
            }
            .name{
                font-size: 14px;
                line-height: 20px;
            }
            .time{
                font-size: 12px;
            }
        }
    }
    .right{
        text-align: right;
        .position_flex;
        div{
            padding: 0 5px;
        }
    }
}
</style>
